<template>
  <div>
    <div style="display: flex;justify-content: center">
      <h1>角色管理</h1>
    </div>

    <!--    表格-->
    <div>
      <el-table :data="cutBean.records" style="width: 100%">
        <el-table-column prop="name" label="角色名称"/>
        <el-table-column fixed="right" label="操作" width="520">
          <template #default="scope">
            <el-button type="danger" @click="del(scope.row)">删除角色</el-button>
            <el-button type="success" @click="infoVisible=true,showGrade(scope.row)">查看角色权限</el-button>
            <el-button type="success" @click="updateVisible=true,update(scope.row)">修改信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:currentPage="cutBean.current"
          v-model:page-size="cutBean.size"
          background
          layout="prev, pager, next, jumper"
          :total="cutBean.total"
          @current-change="findByItem"
      />
    </div>


    <div>
      <div style="display: flex;justify-content: space-around;margin-top: 38px">
        <div style="margin-top: 16px">
          <el-button type="success" @click="addVisible=true">添加新角色</el-button>
        </div>
      </div>
      <!--添加-->
      <el-dialog
          v-model="addVisible"
          title="添加角色"
          width="50%"
      >
        <el-form
            ref="userForm"
            :model="userObj"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            status-icon
            style="width: 90%;"
        >
          <el-form-item label="角色名称：" prop="name">

            <el-input type="text" v-model="roleObj.name"></el-input>
          </el-form-item>
          <el-form-item label="拥有权限：" prop="">
            <el-checkbox v-model="addArray" label="1" size="large">供应商管理</el-checkbox>
            <el-checkbox v-model="addArray" label="2" size="large">客户管理</el-checkbox>
            <el-checkbox v-model="addArray" label="3" size="large">采购入库</el-checkbox>
            <el-checkbox v-model="addArray" label="4" size="large">采购信息查询</el-checkbox>
            <el-checkbox v-model="addArray" label="5" size="large">销售出库</el-checkbox>
            <el-checkbox v-model="addArray" label="6" size="large">销售信息查询</el-checkbox>
            <el-checkbox v-model="addArray" label="7" size="large">库存管理</el-checkbox>
            <el-checkbox v-model="addArray" label="8" size="large">销售统计</el-checkbox>
            <el-checkbox v-model="addArray" label="9" size="large">客户统计</el-checkbox>
            <el-checkbox v-model="addArray" label="10" size="large">用户管理</el-checkbox>
            <el-checkbox v-model="addArray" label="11" size="large">角色管理</el-checkbox>
            <el-checkbox v-model="addArray" label="12" size="large">日志一览</el-checkbox>
          </el-form-item>

        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="addVisible = false">取消</el-button>
        <el-button type="primary" @click="addVisible = false">添加</el-button>
      </span>
        </template>
      </el-dialog>

      <!--修改-->
      <el-dialog
          v-model="updateVisible"
          title="修改角色信息"
          width="50%"
      >
        <el-form
            ref="userForm"
            :model="userObj"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            status-icon
            style="width: 90%;"
        >
          <el-form-item label="角色名称：" prop="name">
            {{ roleObj.name }}
          </el-form-item>
          <el-form-item label="拥有权限：" prop="">
            <el-checkbox v-model="gradeArray" label="1" size="large">供应商管理</el-checkbox>
            <el-checkbox v-model="gradeArray" label="2" size="large">客户管理</el-checkbox>
            <el-checkbox v-model="gradeArray" label="3" size="large">采购入库</el-checkbox>
            <el-checkbox v-model="gradeArray" label="4" size="large">采购信息查询</el-checkbox>
            <el-checkbox v-model="gradeArray" label="5" size="large">销售出库</el-checkbox>
            <el-checkbox v-model="gradeArray" label="6" size="large">销售信息查询</el-checkbox>
            <el-checkbox v-model="gradeArray" label="7" size="large">库存管理</el-checkbox>
            <el-checkbox v-model="gradeArray" label="8" size="large">销售统计</el-checkbox>
            <el-checkbox v-model="gradeArray" label="9" size="large">客户统计</el-checkbox>
            <el-checkbox v-model="gradeArray" label="10" size="large">用户管理</el-checkbox>
            <el-checkbox v-model="gradeArray" label="11" size="large">角色管理</el-checkbox>
            <el-checkbox v-model="gradeArray" label="12" size="large">日志一览</el-checkbox>
          </el-form-item>

        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateVisible = false">取消</el-button>
        <el-button type="primary" @click="updateVisible = false">添加</el-button>
      </span>
        </template>
      </el-dialog>
<!--      查看-->

      <el-dialog
          v-model="infoVisible"
          title="修改角色信息"
          width="50%"
      >
        <el-form
            ref="userForm"
            :model="userObj"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            status-icon
            style="width: 90%;"
        >
          <el-form-item label="角色名称：" prop="name">
            {{ roleObj.name }}
          </el-form-item>
          <el-form-item label="拥有权限：" prop="">

          </el-form-item>

        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="infoVisible = false">取消</el-button>
        <el-button type="primary" @click="infoVisible = false">添加</el-button>
      </span>
        </template>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      roleObj: {},
      cutBean: {
        records: [
          {id: 2, name: "haha", job: "老板", birthday: "1993-02-01"},
          {id: 3, name: "oo", job: "boss", birthday: "1996-02-01"},
          {id: 1, name: "dd", job: "boss2", birthday: "1995-02-01"},
          {id: 4, name: "cc", job: "boss3", birthday: "1994-02-01"},
        ],
        total: 20,
        pages: 5,
        size: 4,
        current: 1
      },
      addVisible: false,
      updateVisible:false,
      infoVisible:false,
      gradeArray: [],
      addArray: [],
    }
  }
}
</script>

<style scoped>

</style>